<template>
	<view class="my-level">
		<!-- #ifdef H5 -->
		<u-sticky offset-top="0">
			<!-- #endif -->
			<view class="" style="position: sticky; top: 0; left: 0; right: 0;z-index: 99;">
				<view class="level-top">
					<view class="flex">
						<view class="photo">
							<image :src="vipInfo.image || 'https://pic.bangbangtongcheng.com/static/my/header.png'"
								style="border-radius: 50%;" mode=""></image>
						</view>
						<view class="user-info">
							<view class="name">
								{{vipInfo.nikeName}}
							</view>
							<!-- <view class="user-level"> -->
							<view class="user-level" v-if="vipInfo.memberLevel"
								:style="{backgroundColor: colors[vipInfo.memberLevel-1].bgColor,borderColor: colors[vipInfo.memberLevel-1].lineColor,color:colors[vipInfo.memberLevel-1].wordColor}">
								{{vipInfo.memberLevelTitle}}
							</view>
						</view>
					</view>
					<swiper style="height: 324rpx;" v-if="index1>0" :current="index1" :duration="500" @change="labelChange">
						<swiper-item v-for="(item,i) in vipData" :key="i">
							<view class="swiper-item">
								<view class="item-level flex">

									<view class="img flex">
										<image :src="levelList[i].img" mode=""></image>
										<text :style="{color: colors[i]}">{{item.title}}</text>
									</view>

									<view class="cur-level flex">
										<!-- <view class="cur-level flex"> -->
										<text
											v-if="(vipInfo.integral)*1 < item.inteOver*1 && (vipInfo.integral)*1 > item.inteStart*1">当前等级</text>
										<text v-else-if="(vipInfo.integral)*1 > item.inteOver*1">已获得</text>
										<text v-else>待升级</text>
										<!-- <view class="cl"
											:style="{backgroundColor: colors[i].bgColor,borderColor: colors[i].lineColor}">
											{{titleReplace(item.title)}}

										</view> -->
										<!-- <view class="cls"
											:style="{backgroundColor: colors[i].bgColor,borderColor: colors[i].lineColor}">
											{{titleReplace(item.title)}}

										</view> -->
										<view class="right-box" 
											:style="{'--bstate':colors[i].lineColor,'--state':colors[i].bgColor,backgroundColor: colors[i].bgColor,borderColor: colors[i].lineColor,}">
											<text
												:style="{color: colors[i].wordColor,left:titleReplace(item.title).length>2?'2rpx':'12rpx'}">{{titleReplace(item.title)}}</text>
										</view>
										<!-- <text class="rank-level" :style="{color: colors[i].wordColor}">
											{{titleReplace(item.title)}}
										</text> -->
									</view>
									<!-- <view class="cur-level flex" v-else>
										<text>待升级</text>
									</view> -->

								</view>
								<view class="level-progress">
									<view class="progress-box">
										<u-line-progress height="9" inactiveColor="#F5F5F5" :showText="false"
											:activeColor="colors[i].lineColor" :percentage="percentage[i]">
										</u-line-progress>
									</view>
									<view class="level-num flex">
										<text v-if="(vipInfo.integral)*1 < item.inteOver*1"
											:style="{color: colors[i].wordColor}">{{(vipInfo.integral)}}/{{item.inteOver}}</text>
										<text v-else
											:style="{color: colors[i].wordColor}">{{item.inteOver}}/{{item.inteOver}}</text>
										<text
											v-if="(vipInfo.integral)*1 < item.inteOver*1">距离升级还差{{item.inteOver*1 - (vipInfo.integral)*1}}帮帮豆</text>
										<text v-else>您已达成</text>
									</view>
								</view>
							</view>
						</swiper-item>
					</swiper>



				</view>
				<view class="swiper-box">
					<view class="swiper-line">

					</view>
					<swiper :duration="500" previous-margin="244rpx" :current="index2" next-margin="244rpx"
						@change="curName">
						<swiper-item v-for="(item,i) in vipData" :key="i">

							<view class="swiper-item1 flex" :class="{itemStyle: i == index2}"
								:style="{color: i == index2 ? colors[i].wordColor : '#848484'}">
								<view class="dot" :class="{dotStyle: i == index2}">
									<view class="small-dot" :class="{smallDotStyle: i == index2}"
										:style="{backgroundColor: i == index2 ? colors[i].wordColor : '#E0E0E0'}">

									</view>
								</view>
								<text>{{item.title}}</text>
							</view>
						</swiper-item>
					</swiper>
				</view>
			</view>
			<!-- #ifdef H5 -->
		</u-sticky>
		<!-- #endif -->
		<view class="level-desc">
			<view class="desc-title">
				— 规则说明 —
			</view>
			<view class="desc-content" v-if="vipData[0]">

				<!-- #ifdef APP-PLUS -->
				<rich-text :nodes="vipData[0].content"></rich-text>
				<!-- #endif -->

				<!-- #ifdef MP -->
				<rich-text :nodes="vipData[0].content"></rich-text>
				<!-- <mp-html class="mp-html" :content="vipData[0].content"></mp-html> -->
				<!-- #endif -->

				<!-- #ifdef H5 -->
				<mp-html :content="vipData[0].content"></mp-html>
				<!-- #endif -->
			</view>
		</view>
		<uniBall></uniBall>
	</view>
</template>

<script>


	import {
		mapGetters
	} from "vuex";
	export default {
		data() {
			return {
				arr: [0, 1, 2, 3, 4, 5, 6, 7, 8],
				index1: 0,
				topColor: {
					"青铜会员": {
						bgColor: "#E9EFEF",
						wordColor: "#60807D",
						lineColor: "#B6C4C3",
						level: "青铜会员"
					},
					"白银会员": {
						bgColor: "#F7F7F7",
						wordColor: "#A3AAB0",
						lineColor: "#D2D9E0",
						level: "白银会员"
					},
					"黄金会员": {
						bgColor: "#FFF8DE",
						wordColor: "#CEAB21",
						lineColor: "#D3CAB2",
						level: "黄金会员"
					},
					"铂金会员": {
						bgColor: "#EDFAFF",
						wordColor: "#59B0E6",
						lineColor: "#BBD0DB",
						level: "铂金会员"
					},
					"钻石会员": {
						bgColor: "#F2F5FF",
						wordColor: "#284EB6",
						lineColor: "#C1CBEF",
						level: "钻石会员"
					},
					"钻石Ⅰ会员": {
						bgColor: "#FDF7FF",
						wordColor: "#A877C6",
						lineColor: "#DBC6E8",
						level: "钻石Ⅰ会员"
					},
					"钻石Ⅱ会员": {
						bgColor: "#F8F2FF",
						wordColor: "#78439F",
						lineColor: "#958AC3",
						level: "钻石Ⅱ会员"
					},
					"钻石Ⅲ会员": {
						bgColor: "#F4F2F2",
						wordColor: "#8D4581",
						lineColor: "#907B8C",
						level: "钻石Ⅲ会员"
					},
					"王者会员": {
						bgColor: "#F4F2F2",
						wordColor: "#502E30",
						lineColor: "#795D5E",
						level: "王者会员"
					},
				},
				levelList: [{
					name: "青铜",
					img: 'https://pic.bangbangtongcheng.com/static/qt01.png'
				}, {
					name: "白银",
					img: 'https://pic.bangbangtongcheng.com/static/by01.png'
				}, {
					name: "黄金",
					img: 'https://pic.bangbangtongcheng.com/static/hj01.png'
				}, {
					name: "铂金",
					img: 'https://pic.bangbangtongcheng.com/static/bj01.png'
				}, {
					name: "钻石",
					img: 'https://pic.bangbangtongcheng.com/static/zs01.png'
				}, {
					name: "钻石I",
					img: 'https://pic.bangbangtongcheng.com/static/zsI01.png'
				}, {
					name: "钻石II",
					img: 'https://pic.bangbangtongcheng.com/static/zsII01.png'
				}, {
					name: "钻石III",
					img: 'https://pic.bangbangtongcheng.com/static/zsIII01.png'
				}, {
					name: "王者",
					img: 'https://pic.bangbangtongcheng.com/static/wz01.png'
				}, ],
				index2: 0,
				colors: [{
						bgColor: "#E9EFEF",
						wordColor: "#60807D",
						lineColor: "#B6C4C3",
						level: "青铜会员"
					},
					{
						bgColor: "#F7F7F7",
						wordColor: "#A3AAB0",
						lineColor: "#D2D9E0",
						level: "白银会员"
					},
					{
						bgColor: "#FFF8DE",
						wordColor: "#CEAB21",
						lineColor: "#D3CAB2",
						level: "黄金会员"
					},
					{
						bgColor: "#EDFAFF",
						wordColor: "#59B0E6",
						lineColor: "#BBD0DB",
						level: "铂金会员"
					},
					{
						bgColor: "#F2F5FF",
						wordColor: "#284EB6",
						lineColor: "#C1CBEF",
						level: "钻石会员"
					},
					{
						bgColor: "#FDF7FF",
						wordColor: "#A877C6",
						lineColor: "#DBC6E8",
						level: "钻石Ⅰ会员"
					},
					{
						bgColor: "#F8F2FF",
						wordColor: "#78439F",
						lineColor: "#958AC3",
						level: "钻石Ⅱ会员"
					},
					{
						bgColor: "#F4F2F2",
						wordColor: "#8D4581",
						lineColor: "#907B8C",
						level: "钻石Ⅲ会员"
					},
					{
						bgColor: "#F4F2F2",
						wordColor: "#502E30",
						lineColor: "#795D5E",
						level: "王者会员"
					},
				],
				userInfo: uni.getStorageSync("Pduser"),
				vipData: [],
				vipInfo: {},
				psg:[]
			}
		},
		onLoad() {
			this.getVip()
			this.getDetails()
		},
		computed: {
			// 进度条百分比计算
			percentage() {
				let num = this.vipData.map(el => {
					let pecg = ((this.vipInfo.integral) * 1 / el.inteOver * 1) * 100
					if (pecg > 100) {
						pecg = 100
					}
					return pecg
				})
				return num
			},
			titleReplace(item) {
				return function(item) {
					let title = item.replace("会员", "")
					return title
				}

			},
		},
		methods: {
			// 获取会员数据
			getVip() {
				this.$myRequest
					.get("/mob/login/getUserInfoByPhone", {
						phone: this.userInfo.phone
					})
					.then(res => {
						this.vipInfo = res.userInfo;
						this.index1 = res.userInfo.memberLevel - 1;
						this.index2 = res.userInfo.memberLevel - 1;
					});
			},

			getDetails() {
				this.$myRequest
					.get("/mob/iteration/getMemberConfigList", {
						userId: this.userInfo.id
					}).then(res => {
						console.log(111111111111, res)
						this.psg = res.data.map(el => {
							/* 标签选择器无法作用域小程序的rich-text组件，需要加上class */
							el.content = el.content.replace(/<table/g,'<table class="table"')
							.replace(/<td/g,'<td class="td"')
							.replace(/<th/g,'<th class="th"')
							.replace(/<blockquote/g,'<blockquote class="blockquote"')
							.replace(/<pre/g,'<pre class="pre"')
							.replace(/<code/g,'<code class="code"')
							.replace(/<ul/g,'<ul class="ul"')
							.replace(/<ol/g,'<ol class="ol"');
							let pecg = (this.vipInfo.integral * 1 / el.inteOver * 1) * 100
							if (pecg > 100) {
								pecg = 100
							}
							return pecg
						})
						this.vipData = res.data;
					})
			},
			labelChange(e) {
				this.index2 = e.detail.current
			},
			curName(e) {
				this.index1 = e.detail.current
			},
		}
	}
</script>

<style lang="less" scoped>
	.right-box {
		display: flex;
		// justify-content: center;
		box-sizing: border-box;
		align-items: center;
		color: rgba(255, 255, 255, 1);
		font-weight: 600;
		font-size: 32rpx;
		position: relative;
		width: 90rpx;
		// padding: 0 5rpx;
		height: 70rpx;
		border:2rpx solid #333333;
		border-radius: 0 10rpx 10rpx 0;
		background-color: rgb(219, 52, 52);
		margin-left: 35rpx;
		text {
			left: 12rpx;
			position: absolute;
			z-index: 99;
			font-size: 28rpx !important;
			font-weight: 500;
		}
	}

	.right-box::before {
		content: '';
		box-sizing: content-box;
		position: absolute;
		top: -2rpx;
		border:2rpx solid var(--bstate);
		border-right: 0;
		/* #ifdef MP-WEIXIN */
		bottom: -4%;
		/* #endif */
		/* #ifdef H5 */
		bottom: -4%;
		/* #endif */
		/* #ifdef APP-PLUS */
		bottom: -3%;
		/* #endif */
		z-index: 1;
		right: 120rpx;
		left: -70rpx;
		background: var(--state);
		transform: translateX(50rpx) skewX(-15deg);
		border-radius: 10rpx 0 0 10rpx;
	}

	page {
		background-color: #ffffff;
	}

	.tops {
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
	}

	.level-top {
		padding: 53rpx 0 0;
		background: linear-gradient(180deg, #64B6A8 0%, #FFFFFF 100%);

		&>view {
			padding: 0 54rpx;

			.photo {
				image {
					width: 120rpx;
					height: 120rpx;
				}
			}

			.user-info {
				margin: 0 0 0 35rpx;

				.name {
					font-size: 32rpx;
					color: #FFFFFF;
					margin: 0 0 36rpx 0;
				}

				.user-level {
					width: 140rpx;
					text-align: center;
					padding: 3rpx 0;
					background: #F6F0FF;
					border-radius: 6rpx 6rpx 6rpx 6rpx;
					opacity: 1;
					border: 2rpx solid #BD90D9;
					font-size: 24rpx;
					font-weight: 500;
					color: #BD90D9;
				}
			}
		}

		.swiper-item {
			margin: 34rpx 54rpx;
			padding: 24rpx 35rpx 35rpx 45rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 3rpx 10rpx 1rpx rgba(173, 173, 173, 0.38);
			border-radius: 34rpx 34rpx 34rpx 34rpx;
		}

		.item-level {
			position: relative;
			justify-content: space-between;
			align-items: center;
			margin: 0 0 32rpx 0;

			.img {
				align-items: flex-end;

				image {
					width: 104rpx;
					height: 94rpx;
					margin-right: 10rpx;
				}

				text {
					font-size: 24rpx;
					font-weight: 100;
				}
			}

			.rank-level {
				position: absolute;
				z-index: 99999999;
				right: 16rpx;
				top: 50%;
				transform: none;
				transform: translate(0, -50%);
				font-size: 28rpx;
				font-weight: 500;
				color: #A877C6;
			}

			.cur-level {
				// position: relative;

				text {
					font-size: 20rpx;
					font-weight: 400;
					color: #333333;
				}


				view {
					// height: 70rpx;
					// position: relative;
					// line-height: 70rpx;
					// background-color: #FDF7FF;

					// border: 1rpx solid #BD90D9;

				}

				.cl {
					margin-left: 10rpx;
					height: 75rpx;
					margin-top: -3rpx;
					transform: perspective(8px)scale(1.1, 1.28) rotateX(5deg);
					transform-origin: bottom right;
					border-radius: 8rpx 0 0 8rpx;
					border-right: 0;
					width: 20rpx;
					line-height: 70rpx;
					background-color: #FDF7FF;

					border: 1rpx solid #BD90D9;
				}

				.cls {
					margin-top: 5rpx;
					height: 68rpx;
					// width: 77rpx;
					padding: 0 15rpx;
					border-left: 0;
					border-radius: 0 8rpx 8rpx 0;
					line-height: 70rpx;
					background-color: #FDF7FF;

					border: 1rpx solid #BD90D9;
				}

				// .cl {
				// 	margin-left: 4rpx;
				//   position: relative;
				//   display: inline-block;
				//   width: 117rpx;
				//   height: 70rpx;
				//   text-align: center;
				// }
				// .cl::before{
				//   content: '';
				//   position: absolute;
				//   top: 0;
				//   left: 0;
				//   right: 0;
				//   bottom: 0;
				//   background: #FDF7FF;
				//   border: 1rpx solid #ff9900;
				//   border-radius: 8rpx;
				//   z-index: -1; 
				//   -webkit-transform: perspective(8px)scale(1.1,1.3) rotateX(5deg);
				//   -moz-transform: perspective(8px)scale(1.1,1.3) rotateX(5deg);
				//   -ms-transform: perspective(8px)scale(1.1,1.3) rotateX(5deg);
				//   -o-transform: perspective(8px)scale(1.1,1.3) rotateX(5deg);
				//   transform: perspective(8px)scale(1.1,1.3) rotateX(5deg);
				//   -webkit-transform-origin:bottom right;  
				//   transform-origin:bottom right;   
				// }
				// .rank-level {
				// 	position: absolute;
				// 	z-index: 99999999;
				// 	right: 16rpx;
				// 	top: 50%;
				// 	transform: none;
				// 	transform: translate(0, -50%);
				// 	font-size: 28rpx;
				// 	font-weight: 500;
				// 	color: #A877C6;
				// }

			}
		}

		.level-progress {
			.progress-box {
				display: flex;
				align-items: center;
				padding: 0 5rpx;
				height: 28rpx;
				background: #F5F5F5;
				border-radius: 25rpx 25rpx 25rpx 25rpx;
			}

			.level-num {
				margin-top: 9rpx;
				justify-content: space-between;
				align-items: center;

				&>text:nth-of-type(1) {
					font-size: 24rpx;
					color: #BD90D9;
				}

				&>text:nth-of-type(2) {
					font-size: 22rpx;
					color: #848484;
				}
			}
		}


	}

	// .cl::before{
	//   content: '';
	//   position: absolute;
	//   top: 0;
	//   left: 0;
	//   right: 0;
	//   bottom: 0;
	//   background: pink;
	//   border: 1rpx solid #ff9900;
	//   border-radius: 8rpx;
	//   z-index: -1; 
	//   -webkit-transform: perspective(0.5em)scale(1.1,1.3) rotateX(5deg);
	//   -moz-transform: perspective(0.5em)scale(1.1,1.3) rotateX(5deg);
	//   -ms-transform: perspective(0.5em)scale(1.1,1.3) rotateX(5deg);
	//   -o-transform: perspective(0.5em)scale(1.1,1.3) rotateX(5deg);
	//   transform: perspective(8px)scale(1.1,1.3) rotateX(5deg);
	//   -webkit-transform-origin:bottom right;  
	//   transform-origin:bottom right;   
	// }

	.swiper-box {
		position: relative;
		z-index: 1000;
		background-color: #fff;

		uni-swiper {
			height: 150rpx;
			
		}
		swiper{
			/* #ifdef MP-WEIXIN */
			height: 150rpx;
			/* #endif */
		}

		.swiper-line {
			position: absolute;
			// z-index: 1000;
			top: 10rpx;
			width: 100%;
			height: 10rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 2rpx 6rpx 1rpx rgba(0, 0, 0, 0.05);
		}

		.swiper-item1 {
			flex-direction: column;
			align-items: center;
			text-align: center;
			font-size: 22rpx;
			color: #848484;

			.dot {
				position: relative;
				top: 4rpx;
				margin: 0 0 20rpx 0;
				width: 22rpx;
				height: 22rpx;
				border-radius: 50%;
				background-color: #fff;
				box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(0, 0, 0, 0.16);

				.small-dot {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					width: 12rpx;
					height: 12rpx;
					border-radius: 50%;
					background-color: #E0E0E0;
				}

			}

			.dotStyle {
				top: 0rpx;
				width: 34rpx;
				height: 34rpx;

				.smallDotStyle {
					width: 22rpx;
					height: 22rpx;
					background-color: #DBC6E8;
				}
			}
		}

		.itemStyle {
			font-size: 26rpx;
			color: #A877C6;
		}
	}


	.level-desc {
		padding: 0rpx 30rpx 84rpx;
		background-color: #fff;

		.desc-title {
			text-align: center;
			margin-bottom: 20rpx;
			font-size: 28rpx;
			color: #333333;
		}

		.desc-content {
			font-size: 26rpx;
			color: #333333;

			.answer {
				margin-left: .5em;
			}
		}
	}
</style>

<style lang="less">
	.desc-content {
		// /deep/ table, 
		/deep/ .table {
			border: 1px solid #ccc !important;
			border: 1px solid #ccc !important;
			border-collapse: collapse !important;
		}

		// /deep/ table td,
		// /deep/ table th,
		/deep/ .table .td,
		/deep/ .table .th {
			border: 1px solid #ccc;
			border-right: 1px solid #ccc;
			padding: 3px 5px;
		}

		// /deep/ table th, 
		/deep/ .table .th {
			border: 1px solid #ccc;
			text-align: center;
			background-color: #64b6a8;
			color: #fff;
		}

		/* blockquote 样式 */
		// /deep/ blockquote, 
		/deep/ .blockquote {
			display: block;
			border-left: 8px solid #d0e5f2;
			padding: 5px 10px;
			margin: 10px 0;
			line-height: 1.4;
			font-size: 100%;
			background-color: #f1f1f1;
		}

		/* code 样式 */
		// /deep/ code,
		/deep/ .code {
			display: inline-block;
			display: inline;
			zoom: 1;
			background-color: #f1f1f1;
			border-radius: 3px;
			padding: 3px 5px;
			margin: 0 3px;
		}

		// /deep/ pre code, 
		/deep/ .pre .code {
			display: block;
		}

		/* ul ol 样式 */
		// /deep/ ul,
		// /deep/ ol,
		/deep/ .ul,
		/deep/ .ol {
			margin: 10px 0 10px 20px;
		}
	}
</style>
